<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="Cache-Control" content="no-transform" />
    <title>LayUI表单元素生成工具 - 爱思英语</title>
    <link rel="stylesheet" href="http://static.24en.com/layui/css/layui.css">
    <script src="./layui.js"></script>
    <script src="http://static.24en.com/js/jquery.min.js"></script>
    <meta name="description" content="用于LAYUI表单组件生成,命令生成功能使得极速开发表单。常用组件如input,select,textarea,button等元素组件可视化选择生成,简单鼠标就可轻松生成." />
    <meta name="keywords" content="layui,layui表单,layui表单生成,layui表单生成工具,表单生成,生成工具" />

    <style>
        .btn_mode_hide{display:none;}.layui-btn.layui-this{background:#5FB878;border-color:#5FB878;color:#fff;}.layui-input-block p{line-height:36px;}.footer{margin-top:50px;clear:both;overflow:hidden;padding:20px 0;background-color:#2F4056;height:auto;position:relative;bottom:0;margin-bottom:0;width:100%;}.footer.logo{margin-top:20px;text-align:center;}.footer.text{margin-top:15px;text-align:center;font-size:14px;color:#486080;}.footer.text P{line-height:20px;}.footer.text p a{color:#486080;}.footer.text p a:hover{color:#01AAED;}.footer.logo.layui-icon{font-size:30px;color:#668dc1;}.line{width:100%;border-bottom:1px solid#d2d2d2;height:1px;margin:20px 0;}.main{}#tool-base{display:block;}#tool-code{display:none;}
    </style>
</head>
<body>
<div class="layui-container main">
    <div class="layui-row" style="margin-top:20px">
        <div class="layui-table-md4 layui-table-md-offset4">
            <h1>LayUI表单元素生成工具</h1>
        </div>
    </div>
    <div class="line"></div>
    <div class="layui-row layui-table-space20">
        <div class="layui-table-md7">
            <form class="layui-form" action="layui.php" method="POST" id="tool-code">
                <div class="layui-form-item" id="value_item">
                    <label class="layui-form-label">代码命令</label>
                    <div class="layui-input-block">
			      <textarea type="text" name="code" id="code"
                            placeholder="
注:以下功能未实装
此方法用于快速生成form表单组件
可以这样写入,一行一个
组件>选择器>参数的格式
命令结尾可以用#和@来添加input.text input.password和textarea的输入提示内容和设置必填项,但是#必须在@之前,可以单独使用.
如
input.text>id>a
input.text>id>a#这里是一个提示内容@must
生成的即为<input type='text' name='id' id='id' value='a' />的layui表单样式代码,可省略参数
例:
input>id>序号
input.text>title>标题
input.password>password>密码
select.search>keyword>搜索>1==是:default&2==否&3=禁用:disable
radio>gender>单选>1==男人:default&2==女人
checkbox.switch>sex>多选>1==男人:default&2==女人

暂时支持如下模块:
input
input.text
input.password
input.radio
input.hidden

select
select.search
select.ignore

radio 为input.radio的别名

checkbox
checkbox.switch
checkbox.primary

textarea#这里是提示@r
" autocomplete="off" class="layui-textarea" style="height:600px;">
input
input.hidden>id>ID
input>username>用户名#请输入用户名@r
input.password>password>密码#请输入密码@r
input.password>repassword>确认#请再次输入密码@r
select>gourpid>用户组>1==管理员:disable&2==客服组:default
select>gourpid>所属商店>
input>phone>手机#请输入手机号或者电话号码
input>email>邮箱#请输入邮箱地址
input>qq>QQ#请输入QQ号码
input>cardid>身份证#请输入身份证
checkbox.switch>isdevice>绑定设备>1==是|否
checkbox.switch>checked>状态>1==开启|禁用
</textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="hidden" name="iscode" value="1" />
                        <button class="layui-btn" lay-submit lay-filter="code-submit">立即提交</button>
                        <a type="reset" class="layui-btn layui-btn-primary" id="tool-base-btn">选择组件</a>
                    </div>
                </div>
            </form>
            <form class="layui-form" action="layui.php" method="POST" id="tool-base">
                <input type="hidden" name="act" id="act" value="getlayui" />
                <div class="layui-form-item">
                    <label class="layui-form-label">类型</label>
                    <div class="layui-input-block">
                        <select name="type" lay-verify="required" lay-filter="type"  lay-search>
                            <option value="text">text 文本输入</option>
                            <option value="password">password 密码输入</option>
                            <option value="select">select 选择</option>

                            <option value="radio">radio 单选</option>
                            <option value="checkbox">checkbox 复选</option>
                            <option value="textarea">textarea 文本域</option>

                            <option value="button">button 按钮</option>
                            <option value="form">form 表单</option>
                            <option value="captcha">captcha 验证码</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">选择器</label>
                    <div class="layui-input-block">
                        <input type="text" name="item" placeholder="默认 name id:item" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="label" placeholder="默认 label:filed" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item" id="pla_item">
                    <label class="layui-form-label">提示输入</label>
                    <div class="layui-input-block">
                        <input type="text" name="pla" id="pla" placeholder="输入一些需要提醒输入的内容" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" id="value_item">
                    <label class="layui-form-label">输入值</label>
                    <div class="layui-input-block">
			      <textarea type="text" name="value" id="value"
                            placeholder="
值
或者
值==名:default
值==名:disable
值==名
" autocomplete="off" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item" id="isignore_item">
                    <label class="layui-form-label">忽略美化</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="ignore" id="ignore" lay-skin="switch" value="1">
                    </div>
                </div>
                <div class="layui-form-item" id="islaysearch_item">
                    <label class="layui-form-label">搜索功能</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="islaysearch" id="islaysearch" lay-skin="switch" value="1">
                    </div>
                </div>
                <div class="layui-form-item" id="ispane_item">
                    <label class="layui-form-label">方框风格</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="ispane" id="ispane" lay-skin="switch" value="1">
                    </div>
                </div>


                <div class="layui-form-item" id="ismust_item">
                    <label class="layui-form-label">必填</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="ismust" id="ismust" lay-skin="switch" value="1">
                    </div>
                </div>
                <div class="layui-form-item" id="isswitch_item">
                    <label class="layui-form-label">开关</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="isswitch" id="isswitch" lay-skin="switch" value="1">
                    </div>
                </div>
                <div class="layui-form-item" id="isprimary_item">
                    <label class="layui-form-label">默认风格</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="isprimary" id="isprimary" lay-skin="switch" value="1">
                    </div>
                </div>
                <div class="layui-form-item" id="btn_style_item">
                    <label class="layui-form-label">按钮样式</label>
                    <input type="hidden" name="btn_style" id="btn_style" value="btn" />
                    <div class="layui-input-block">
                        <p class="btn-style-list">
                            <a class="layui-btn layui-btn-sm layui-btn-primary" data-value='primary'>原始按钮</a>
                            <a class="layui-btn layui-btn-sm layui-this" data-value='btn'>默认按钮</a>
                            <a class="layui-btn layui-btn-sm layui-btn-normal" data-value='normal'>百搭按钮</a>
                            <a class="layui-btn layui-btn-sm layui-btn-warm" data-value='warm'>暖色按钮</a>
                            <a class="layui-btn layui-btn-sm layui-btn-danger" data-value='danger'>警告按钮</a>
                            <a class="layui-btn layui-btn-sm layui-btn-disabled" data-value='disabled'>禁用按钮</a>
                        </p>
                    </div>
                </div>
                <div class="layui-form-item" id="btn_size_item">
                    <label class="layui-form-label">按钮大小</label>
                    <input type="hidden" name="btn_size" id="btn_size" value="btn" />
                    <div class="layui-input-block">
                        <p class="btn-size-list">
                            <a class="layui-btn layui-btn-lg" data-value='lg'>大型</a>
                            <a class="layui-btn layui-this" data-value='btn'>默认</a>
                            <a class="layui-btn layui-btn-sm" data-value='sm'>小型</a>
                            <a class="layui-btn layui-btn-xs" data-value='xs'>迷你</a>
                        </p>
                    </div>
                </div>
                <div class="layui-form-item" id="btn_type_item">
                    <label class="layui-form-label">按钮类别</label>
                    <div class="layui-input-block">
                        <input type="radio" name="btn_type" value="a" title="&lt; a &gt;" checked>
                        <input type="radio" name="btn_type" value="button" title="&lt; button &gt;">
                        <input type="radio" name="btn_type" value="input" title="&lt; input &gt;">
                    </div>
                </div>
                <!-- 			  <div class="layui-form-item" id="buttiontype_item">
                                <label class="layui-form-label">按钮方式</label>
                                <div class="layui-input-block">
                                    <input type="radio" name="btn_mode" value="a" title="onclick" checked>
                                    <input type="radio" name="btn_mode" value="submit" title="submit" class="btn_mode_hide">
                                    <input type="radio" name="btn_mode" value="reset" title="reset" class="btn_mode_hide">
                                </div>
                              </div> -->
                <div class="layui-form-item" id="btn_fluid_item">
                    <label class="layui-form-label">流体按钮</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="btn_fluid" id="btn_fluid" lay-skin="switch" value="1">
                    </div>
                </div>
                <div class="layui-form-item" id="btn_radius_item">
                    <label class="layui-form-label">圆角按钮</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="btn_radius" id="btn_radius" lay-skin="switch" value="1">
                    </div>
                </div>

                <div class="layui-form-item" id="isword_item">
                    <label class="layui-form-label">辅助文字</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="isword" id="isword" lay-filter="isword" lay-skin="switch" value="1">
                    </div>
                </div>
                <div class="layui-form-item" id="word_item">
                    <label class="layui-form-label">文字内容</label>
                    <div class="layui-input-block">
                        <input type="text" name="word_aux" id="word" lay-filter="word" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" id="display_item">
                    <label class="layui-form-label">显示</label>
                    <div class="layui-input-block">
                        <input type="radio" name="display" value="block" title="block" checked>
                        <input type="radio" name="display" value="inline" title="inline">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
                        <a type="reset" class="layui-btn layui-btn-primary" id="tool-code-btn">命令生成</a>
                    </div>
                </div>
            </form>
        </div>
        <!-- md end -->

        <div class="layui-table-md5">
            <div class="layui-row " style="display:none;" id="showcode">
                <form class="layui-form">
                    <div style="border-bottom: 1px solid #ebebeb ;padding:10px;margin-bottom: 15px;">代码:</div>
                    <div class="layui-form-item">
                        <textarea name="codearea" id="codearea" lay-filter="codearea" class="layui-textarea" style="height:258px"></textarea>
                    </div>
                </form>
            </div>


            <div class="layui-row " style="display:none;margin-top:20px" id="showdemo">
                <!-- <form class="layui-form"> -->
                <div class="layui-demo-text" style="border-bottom: 1px solid #ebebeb ;padding:10px;margin-bottom: 15px;">代码样式:</div>
                <div class="layui-demo" id="layui-demo">
                </div>
                <!-- </form> -->
            </div>
        </div> <!--md5-->
    </div>
    <!-- row -->
</div>
<!-- <div class="layui-container footer">
        <div class="logo"><i class="layui-icon"></i>
        </div>
        <div class="text">
            <p>版权所有：<a id="scanstart">雷动信息</a></p>
            <p>© <a>2018</a> <a href="http://www.24en.com/">24en.com</a> powered by <a href="http://layui.com/">LayUI</a></p>
            <p><a>SLUM</a></p>
        </div>
</div> -->
</body>
<script>
    layui.use(['element', 'layer', 'form','code'], function() {
        var element = layui.element;
        var layer = layui.layer;
        var form = layui.form;
        $('#tool-code-btn').click(function(){
            $('#tool-base').hide(),$('#tool-code').fadeIn();
        });
        $('#tool-base-btn').click(function(){
            $('#tool-code').hide(),$('#tool-base').fadeIn();
        });
        typeinit();
        $('#pla_item').show();
        $('#isword_item').show();
        $('#ismust_item').show();
        $('#display_item').show();
        $('#value_item').show();
        form.on('switch(isword)',function(data){
            if(data.elem.checked==true){
                $('#word_item').show(),$('#display_item').hide();
            }else $('#word_item').hide(),$('#display_item').show();
        });
        form.on('select(type)',function(data){
            typeinit();
            if(data.value=='text'||data.value=='password'||data.value=='textarea'){
                $('#pla_item').show();
                $('#ismust_item').show();
                $('#isword_item').show();
                $('#value_item').show();
            }
            if(data.value=='checkbox'){
                $('#isswitch_item').show();
                $('#value_item').show();
                $('#isprimary_item').show();
                $('#isword_item').show();
            }
            if(data.value=='radio'){
                $('#value_item').show();
                $('#isword_item').show();
            }
            if(data.value=='select'){
                $('#value_item').show();
                $('#islaysearch_item').show();
                $('#isignore_item').show();
                $('#ismust_item').show();
                $('#isword_item').show();
            }
            if(data.value=='captcha'){
                $('#pla_item').show();
            }
            if(data.value=='form'){
                $('#ispane_item').show();
            }
            if(data.value=='button'){
                $('#value_item').show();
                $('#btn_fluid_item').show();
                $('#btn_radius_item').show();
                $('#btn_size_item').show();
                $('#btn_style_item').show();
                $('#btn_type_item').show();
                $('#display_item').hide();
            }

        });
        $(".btn-style-list a").click(function(index){
            $(this).addClass('layui-this').siblings().removeClass('layui-this');
            $('#btn_style').val($(this).attr('data-value'));

        })
        $(".btn-size-list a").click(function(index){
            $(this).addClass('layui-this').siblings().removeClass('layui-this');
            $('#btn_size').val($(this).attr('data-value'));

        })
        function typeinit(){
            $('#pla_item').hide();$('#pla').val('');
            $('#value_item').hide();
            $('#isswitch_item').hide();
            $('#word_item').hide();
            $('#islaysearch_item').hide();
            $('#isignore_item').hide();
            $('#ispane_item').hide();
            $('#isprimary_item').hide();
            $('#btn_fluid_item').hide();
            $('#btn_radius_item').hide();
            $('#btn_size_item').hide();
            $('#btn_style_item').hide();
            $('#btn_type_item').hide();
            $('#display_item').show();
            $('#isword_item').hide();
            $('#ismust_item').hide();

        }
        form.on("submit(code-submit)",function(data){
            console.log(data.field);
            $.post('/form',data.field,function(res){
                if(res.html){
                    $('#showcode').fadeIn();
                    $('#showdemo').fadeIn();
                    $('#codearea').val(res.html);
                    $('#layui-demo').html('<form class="layui-form" lay-filter="layui-demo">'+res.html+'</form>');form.render(null,"layui-demo");
                }

            },'json')
            return false;
        });
        form.on("submit(submit)",function(data){

            $.post('/form',data.field,function(res){
                if(res){
                    $('#showcode').fadeIn();
                    $('#showdemo').fadeIn();
                    $('#codearea').val(res);
                    if(data.field.type=='form'){
                        $('#layui-demo').html(res);
                        form.render();
                    }else{
                        $('#layui-demo').html('<form class="layui-form" lay-filter="layui-demo">'+res+'</form>');
                        form.render(null,"layui-demo");
                    }
                }
            },'json')
            return false;
        });
    });
</script>
</html>